{% extends "base.html" %}

{% block title %}工具助手 - 工时工具{% endblock %}

{% block extra_css %}
<style type="text/tailwindcss">
    @layer utilities {
        /* 确保Tailwind工具类正确生效 */
        .tools-directory {
            @apply bg-white rounded-xl shadow-md overflow-hidden;
        }

        .category-heading {
            @apply bg-gray-50 px-6 py-4 border-b border-gray-100;
        }
        .category-title {
            @apply text-lg font-semibold text-gray-800 flex items-center;
        }
        .category-icon {
            @apply mr-2 text-blue-600;
        }

        .tools-list {
            @apply divide-y divide-gray-100;
        }

        .tool-item {
            @apply px-6 py-4 hover:bg-gray-50 transition-colors duration-200;
        }
        .tool-link {
            @apply flex items-center justify-between w-full text-left;
        }
        .tool-info {
            @apply flex items-center;
        }
        .tool-icon {
            @apply text-xl mr-3 text-gray-500;
        }
        .tool-name {
            @apply font-medium text-gray-800;
        }
        .tool-desc {
            @apply text-sm text-gray-500 mt-0.5;
        }
        .tool-arrow {
            @apply text-gray-400 transition-transform duration-200 group-hover:translate-x-1;
        }

        .tool-badge {
            @apply ml-2 px-2 py-0.5 text-xs rounded-full;
        }
        .new-badge {
            @apply bg-green-100 text-green-600;
        }
        .hot-badge {
            @apply bg-red-100 text-red-600;
        }

        .favorites-section {
            @apply mb-8;
        }
        .favorites-header {
            @apply flex items-center justify-between mb-4;
        }
        .favorites-title {
            @apply text-xl font-bold text-gray-800;
        }
        .favorites-empty {
            @apply text-gray-500 py-8 text-center bg-gray-50 rounded-lg;
        }

        .search-container {
            @apply relative mb-6;
        }
        .search-input {
            @apply w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 outline-none transition-all;
        }
        .search-icon {
            @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
        }

        .content-wrapper {
            @apply px-4 md:px-6 max-w-4xl mx-auto py-8;
        }

        .page-title {
            @apply text-2xl md:text-3xl font-bold text-gray-800 mb-2;
        }
        .page-description {
            @apply text-gray-600 mb-8;
        }

        /* 分类容器 */
        .categories-container {
            @apply space-y-8;
        }

        /* 添加过渡动画 */
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="content-wrapper">
    <h1 class="page-title">工具助手中心</h1>
    <p class="page-description">浏览并使用各类实用工具，提高工作效率</p>

    <!-- 搜索框 -->
    <div class="search-container">
        <i class="fa fa-search search-icon"></i>
        <input type="text" id="toolSearch" class="search-input" placeholder="搜索工具...">
    </div>

    <!-- 常用工具 -->
    <div class="favorites-section">
        <div class="favorites-header">
            <h2 class="favorites-title flex items-center">
                <i class="fa fa-star text-yellow-500 mr-2"></i>常用工具
            </h2>
        </div>

        <div class="tools-directory" id="favoritesList">
            <div class="favorites-empty" id="favoritesEmpty">
                <i class="fa fa-star-o mb-2 text-gray-400"></i>
                <p>暂无常用工具，点击工具项右侧的星星图标添加</p>
            </div>
        </div>
    </div>

    <!-- 工具分类容器（将由JavaScript动态生成内容） -->
    <div class="categories-container" id="toolCategories">
        <!-- 工具分类内容将在这里动态生成 -->
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 确保先加载Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<script>
    // 确保DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 工具分类数据
        const categories = [
            {
                id: 'calculation',
                name: '计算工具',
                icon: 'fa-calculator'
            },
            {
                id: 'conversion',
                name: '转换工具',
                icon: 'fa-exchange'
            },
            {
                id: 'planning',
                name: '计划工具',
                icon: 'fa-tasks'
            }
        ];

        // 工具数据 - 只需修改这里的数据，页面会自动更新
        const tools = [
            {
                "id": 1,
                "name": "标注记录器",
                "description": "便捷记录标注的框数、帧数等",
                "icon": "fa-calculator",
                "url": "/tagRecord",
                "category": "calculation",
                "badge": "hot"  // 可选值: "hot", "new" 或不设置
            },
            {
                "id": 2,
                "name": "绩效计算器",
                "description": "计算项目绩效和完成率",
                "icon": "fa-percent",
                "url": "/err",
                "category": "calculation",
                "badge": "hot"
            },
            {
                "id": 3,
                "name": "日期转换器",
                "description": "转换不同格式的日期和时间",
                "icon": "fa-calendar",
                "url": "/err",
                "category": "conversion"
            },
            {
                "id": 4,
                "name": "工时单位转换",
                "description": "转换不同工时单位（天/小时/分钟）",
                "icon": "fa-clock-o",
                "url": "/err",
                "category": "conversion",
                "badge": "new"
            },
            {
                "id": 5,
                "name": "项目计划器",
                "description": "制定和管理项目时间线",
                "icon": "fa-tasks",
                "url": "/err",
                "category": "planning",
                "badge": "hot"
            }
        ];

        // 本地存储的常用工具
        let favoriteToolIds = JSON.parse(localStorage.getItem('favoriteTools')) || [];

        // 初始化页面 - 生成所有工具分类和工具项
        function initTools() {
            const toolCategoriesContainer = document.getElementById('toolCategories');
            toolCategoriesContainer.innerHTML = '';

            // 为每个分类生成HTML
            categories.forEach(category => {
                // 过滤出该分类下的工具
                const categoryTools = tools.filter(tool => tool.category === category.id);

                if (categoryTools.length > 0) {
                    // 创建分类容器
                    const categoryDiv = document.createElement('div');
                    categoryDiv.className = 'mb-8';
                    categoryDiv.innerHTML = `
                        <div class="category-heading">
                            <h2 class="category-title">
                                <i class="fa ${category.icon} category-icon"></i>${category.name}
                            </h2>
                        </div>
                        <div class="tools-list" id="category-${category.id}">
                            <!-- 工具项将在这里动态生成 -->
                        </div>
                    `;

                    toolCategoriesContainer.appendChild(categoryDiv);

                    // 获取工具列表容器
                    const toolsList = document.getElementById(`category-${category.id}`);

                    // 为每个工具生成HTML
                    categoryTools.forEach(tool => {
                        const toolItem = createToolItem(tool);
                        toolsList.appendChild(toolItem);
                    });
                }
            });

            // 初始化常用工具和搜索功能
            initFavorites();
            initSearch();
        }

        // 创建工具项HTML
        function createToolItem(tool) {
            const toolItem = document.createElement('div');
            toolItem.className = 'tool-item group';
            toolItem.dataset.toolId = tool.id;

            // 构建徽章HTML（如果有）
            let badgeHtml = '';
            if (tool.badge === 'hot') {
                badgeHtml = '<span class="tool-badge hot-badge">热门</span>';
            } else if (tool.badge === 'new') {
                badgeHtml = '<span class="tool-badge new-badge">新工具</span>';
            }

            // 检查是否为常用工具
            const isFavorite = favoriteToolIds.includes(tool.id);
            const starIcon = isFavorite ? 'fa-star text-yellow-500' : 'fa-star-o text-gray-400 hover:text-yellow-500';

            toolItem.innerHTML = `
                <a href="${tool.url}" class="tool-link">
                    <div class="tool-info">
                        <i class="fa ${tool.icon} tool-icon"></i>
                        <div class="tool-details">
                            <div class="tool-name">${tool.name}</div>
                            <div class="tool-desc">${tool.description}</div>
                            ${badgeHtml}
                        </div>
                    </div>
                    <div class="flex items-center">
                        <button class="mr-2 favorite-btn" data-tool-id="${tool.id}">
                            <i class="fa ${starIcon}"></i>
                        </button>
                        <i class="fa fa-arrow-right tool-arrow"></i>
                    </div>
                </a>
            `;

            // 添加收藏按钮事件
            const favoriteBtn = toolItem.querySelector('.favorite-btn');
            favoriteBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const toolId = parseInt(this.dataset.toolId);
                toggleFavorite(toolId);
            });

            return toolItem;
        }

        // 切换工具的常用状态
        function toggleFavorite(toolId) {
            const index = favoriteToolIds.indexOf(toolId);

            if (index > -1) {
                // 取消常用
                favoriteToolIds.splice(index, 1);
            } else {
                // 添加常用
                favoriteToolIds.push(toolId);
            }

            // 保存到本地存储
            localStorage.setItem('favoriteTools', JSON.stringify(favoriteToolIds));

            // 更新UI
            updateFavoriteUI();
        }

        // 更新常用工具UI
        function initFavorites() {
            const favoritesList = document.getElementById('favoritesList');
            const favoritesEmpty = document.getElementById('favoritesEmpty');

            // 清空现有内容
            favoritesList.innerHTML = '';

            // 获取常用工具
            const favoriteTools = tools.filter(tool => favoriteToolIds.includes(tool.id));

            if (favoriteTools.length > 0) {
                // 隐藏空状态
                favoritesEmpty.style.display = 'none';

                // 创建常用工具列表
                const toolsList = document.createElement('div');
                toolsList.className = 'tools-list';

                favoriteTools.forEach((tool, index) => {
                    const toolItem = createFavoriteToolItem(tool);
                    setTimeout(() => {
                        toolItem.classList.add('fade-in');
                        toolsList.appendChild(toolItem);
                    }, index * 100);
                });

                favoritesList.appendChild(toolsList);
            } else {
                // 显示空状态
                favoritesList.appendChild(favoritesEmpty);
                favoritesEmpty.style.display = 'block';
            }

            // 更新所有收藏按钮状态
            updateFavoriteButtons();
        }

        // 创建常用工具项
        function createFavoriteToolItem(tool) {
            const toolItem = document.createElement('div');
            toolItem.className = 'tool-item group';
            toolItem.innerHTML = `
                <a href="${tool.url}" class="tool-link">
                    <div class="tool-info">
                        <i class="fa ${tool.icon} tool-icon"></i>
                        <div class="tool-details">
                            <div class="tool-name">${tool.name}</div>
                            <div class="tool-desc">${tool.description}</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <button class="text-yellow-500 mr-2 favorite-btn" data-tool-id="${tool.id}">
                            <i class="fa fa-star"></i>
                        </button>
                        <i class="fa fa-arrow-right tool-arrow"></i>
                    </div>
                </a>
            `;

            // 添加取消收藏功能
            const favoriteBtn = toolItem.querySelector('.favorite-btn');
            favoriteBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const toolId = parseInt(this.dataset.toolId);
                toggleFavorite(toolId);
            });

            return toolItem;
        }

        // 更新所有收藏按钮状态
        function updateFavoriteButtons() {
            document.querySelectorAll('.favorite-btn').forEach(button => {
                const toolId = parseInt(button.dataset.toolId);
                const icon = button.querySelector('i');

                if (favoriteToolIds.includes(toolId)) {
                    // 已收藏状态
                    icon.className = 'fa fa-star text-yellow-500';
                } else {
                    // 未收藏状态
                    icon.className = 'fa fa-star-o text-gray-400 hover:text-yellow-500';
                }
            });
        }

        // 更新常用工具UI（包括按钮状态）
        function updateFavoriteUI() {
            initFavorites();
            updateFavoriteButtons();
        }

        // 初始化搜索功能
        function initSearch() {
            const searchInput = document.getElementById('toolSearch');

            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase().trim();
                const toolItems = document.querySelectorAll('.tool-item');

                toolItems.forEach(item => {
                    const toolName = item.querySelector('.tool-name').textContent.toLowerCase();
                    const toolDesc = item.querySelector('.tool-desc').textContent.toLowerCase();

                    if (toolName.includes(searchTerm) || toolDesc.includes(searchTerm)) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        }

        // 初始化页面
        initTools();
    });
</script>
{% endblock %}
